<template>
	<view>
		<view>
			<view class="choice-bar">
				<view class="nav-choice" :class="isActive[index]" v-for="(value,index) in navChoice" :key="index"
					@click="changeActive(index)">{{value}}</view>
			</view>
			<aircondition-record v-for="(item,index) in recordList" :key="index" :building="item.building" 
				:company="item.company" :state="item.state" :time="item.time" @getClick="toAnnoucementDetails"></aircondition-record>
		</view>
		<!-- <u-tabbar v-model="current" :list="list" :before-switch="clickTabbar"></u-tabbar> -->
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
	} from "../../../util/network.js"
	export default{
		data() {
			return {
				token:'',
				navChoice: ['系统消息','进度消息'],
				isActive: ['active-choice','nav-choice'],
				activeIndex: 0,
				pageNo:1,
				pageSize:10,
				recordList:[
					{'company':'停电通知','building':'中青大厦',
						'time':'2021-09-01 12:11:11','state':'系统消息'},
					{'company':'停水通知','building':'万福大厦',
						'time':'2021-09-01 12:11:11','state':'系统消息'},
					{'company':'停电通知','building':'万福花园',
						'time':'2021-09-01 12:11:11','state':'系统消息'}
				],
				list: [
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '管家',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发现',
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '消息',
						count: 23,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
					},
				],
				current: 0,
				isLoadMore:false,  //是否加载中
			}
		},
		onReachBottom() {
			if(!this.isLoadMore){
				this.isLoadMore=true
				this.pageNo+=1
				this.getList()
			}
		},
		methods: {
			getList(){
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/message/list`,
					header: {
						'Authorization': this.token,
					},
					data: {
						pageNo:this.pageNo,
						pageSize:this.pageSize,
						receiverUserType:1,
					},
					method:'GET',
					success: function (res) {
						console.log(res)
						// if(res.data.code == 200){
						// 	uni.navigateBack()
						// }
					},
					fail: (res) => {
						console.log("装修审核调用失败",res)
					}
				})
			},
			changeActive(e) {
				if(e!==this.activeIndex){
					let tmp = [...this.isActive]
					tmp[e] = 'active-choice'
					tmp[this.activeIndex] = 'nav-choice'
					this.activeIndex = e
					this.isActive = tmp
				}
			},
			clickTabbar(index) {
				switch(index){
					case 0:
						console.log('首页')
						uni.redirectTo({
							url:'/pages/home/home'
						})
						return true
						break
					case 1:
						console.log('管家')
						return true
						break
					case 2:
						console.log('发现')
						return true
						break
					case 3:
						console.log('消息')
						uni.redirectTo({
							url:'/pages/systemAnnoucement/list/list'
						})
						return true
						break
					case 4:
						console.log('我的')
						uni.navigateTo({
							url:'/pages/myPage/myPage'
						})
						return true
						break
				}
			},
			toAnnoucementDetails() {
				uni.navigateTo({
					url:'../details/details'
				})
			},
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			this.getList()
		}
	}
</script>

<style>
	.nav-choice{
		height: 100rpx;
		width: 375rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		border-bottom: solid 5rpx #F1F1F1;
	}
	.choice-bar{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content:center;
		color: #808080;
	}
	.active-choice{
		height: 100rpx;
		width: 375rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight:600;
		color: #DD524D;
		border-bottom: solid 5rpx #DD524D;
	}
</style>
